<template>
  <div class="time-tunnel-bg">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let animationId = null

onMounted(() => {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  const centerX = canvas.width / 2
  const centerY = canvas.height / 2
  const maxRadius = Math.max(canvas.width, canvas.height)
  
  class Ring {
    constructor(delay = 0) {
      this.radius = 0
      this.delay = delay
      this.age = 0
      this.maxAge = 200
    }

    update() {
      if (this.delay > 0) {
        this.delay--
        return true
      }
      
      this.age++
      this.radius = (this.age / this.maxAge) * maxRadius
      return this.age < this.maxAge
    }

    draw() {
      if (this.delay > 0) return

      const progress = this.age / this.maxAge
      const opacity = 1 - progress
      
      // 彩色环
      const hue = (progress * 360) % 360
      ctx.strokeStyle = `hsla(${hue}, 80%, 60%, ${opacity * 0.8})`
      ctx.lineWidth = 3
      ctx.beginPath()
      ctx.arc(centerX, centerY, this.radius, 0, Math.PI * 2)
      ctx.stroke()

      // 光晕效果
      ctx.strokeStyle = `hsla(${hue}, 80%, 70%, ${opacity * 0.3})`
      ctx.lineWidth = 8
      ctx.beginPath()
      ctx.arc(centerX, centerY, this.radius, 0, Math.PI * 2)
      ctx.stroke()
    }
  }

  const rings = []
  let frameCount = 0

  const animate = () => {
    ctx.fillStyle = 'rgba(0, 0, 10, 0.1)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // 每10帧添加一个新环
    if (frameCount % 10 === 0) {
      rings.push(new Ring())
    }

    for (let i = rings.length - 1; i >= 0; i--) {
      if (!rings[i].update()) {
        rings.splice(i, 1)
      } else {
        rings[i].draw()
      }
    }

    // 绘制中心光点
    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 50)
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)')
    gradient.addColorStop(0.5, 'rgba(100, 200, 255, 0.4)')
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
    ctx.fillStyle = gradient
    ctx.fillRect(centerX - 50, centerY - 50, 100, 100)

    frameCount++
    animationId = requestAnimationFrame(animate)
  }

  animate()

  const handleResize = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }

  window.addEventListener('resize', handleResize)

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
  })
})
</script>

<style scoped>
.time-tunnel-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle, #000a1e 0%, #000000 100%);
}

canvas {
  display: block;
}
</style>

